<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: boBrother
 * @LastEditTime: 2022-01-06 19:50:20
-->
<template>
  <div id="bottom3ontainer" style="height: 95%"></div>
</template>
<script>
import { get } from "@/utils/request.js";
import moment from "moment";
import { Line } from "@antv/g2plot";
export default {
  data() {
    return {
      deviceData: [],
      params: {
        page: 1,
        pageSize: 50,
      },
      chart: null,
    };
  },
  computed: {
    chartData() {
      return this.deviceData.map((item) => {
        return {
          date: moment(item.insert_time).format("hh:mm"),
          noise: parseFloat(item.noise),
        };
      });
    },
  },
  methods: {
    initChart() {
      if (this.chart) {
        this.chart.destroy();
      }
      this.chart = new Line("bottom3ontainer", {
        data: this.chartData,
        padding: "auto",
        xField: "date",
        yField: "noise",
        stepType: "vh",
        xAxis: {
          // range: [0, 1],
          label: {
            style: {
              fill: "rgba(255,255,255,.7)",
            },
          },
        },
        yAxis: {
          label: {
            style: {
              fill: "rgba(255,255,255,.7)",
            },
          },
          grid: {
            line: {
              // 设置辅助线样式
              style: {
                lineDash: [2, 3], // 虚线配置，第一个值为虚线每个分段的长度，第二个值为分段
                strokeOpacity: 0.2, // 辅助线透明度
              },
            },
          },
        },
      });
      this.chart.update({
        theme: {
          styleSheet: {
            brandColor: "#9DF5CA",
            paletteQualitative10: [
              "#9DF5CA",
              "#61DDAA",
              "#42C090",
              "#19A576",
              "#008A5D",
              "#006F45",
              "#00562F",
              "#003E19",
              "#002800",
            ],
            paletteQualitative20: [
              "#9DF5CA",
              "#61DDAA",
              "#42C090",
              "#19A576",
              "#008A5D",
              "#006F45",
              "#00562F",
              "#003E19",
              "#002800",
            ],
          },
        },
      });
      this.chart.render();
    },

    getQueryRealData() {
      get("/dashboard/pageQueryData", {
        ...this.params,
        device_id: 28,
      }).then((res) => {
        this.deviceData = res.data.list;
        this.initChart();
      });
    },
  },

  mounted() {
    this.getQueryRealData();
    setInterval(() => {
      this.getQueryRealData();
    }, 6000);
  },
};
</script>


